<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="../../common/layui.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
    <title>已经完成的流程</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
</head>
<body>

<!-- 可发起的流程  就是已经部署的流程  -->

<div class="section_mian">
    <!-- 列表页 -->
    <div class="larry-personal">
        <div class="layui-tab">

            <form class="layui-form">
                <table class="layui-table" id="layuitable" lay-filter="tableFilter"></table>
            </form>

        </div>
    </div>
</div>

<script type="text/html" id="toolbar">
    <a class="layui-btn btn_color_zise" lay-event="showNodePic" style="line-height: 25px;height: 25px;">时间轴</a>
</script>


<script type="text/javascript">
    function  reloadTable() {//刷新表格
        layui.table.reload('layuitable', {   where: {} });
    }
    layui.use(['laypage', 'layer', 'table', 'form', 'laydate'], function () {
        var laypage = layui.laypage
            , layer = layui.layer
            , table = layui.table
            , form = layui.form;
        var where = {};
        table.render({
            url: "flow/history/grid",
            method: 'post', //方式
            elem: '#layuitable', //数据表格渲染到什么位置
            id: 'layuitable', //生成 Layui table 的标识 id 用于操作数据用
            where: where, //默认 参数
            height:500,
            cols: [[
                {checkbox: true},
                {field: "id", title: 'ID', minWidth: 100},
                {field: "startTime", title: '开始时间', minWidth: 100},
                {field: "endTime", title: '结束时间', minWidth: 100},
                {field: "flowId", title: 'flowId', minWidth: 100},
                {field: "flowDepId", title: 'flowDepId', minWidth: 100},
                {field: "state", title: 'state', minWidth: 100},
                {field: "opt", title: '节点图', toolbar: '#toolbar', width: 200}
            ]],
            done: function (res, curr, count) {
                //$("[data-field='id']").css('display','none');//隐藏列,[data-field='state']
                /*$("[data-field='flowDepId']").children().each(function(){//处理节点名字,流程处于哪个节点
                    var flowDepId = $(this).text();
                    if(flowDepId!="节点图"){
                        //var taskId = $(this).parent().prev().children(0).html();//获取nodeID -01
                        var taskId = $(this).parent().next().children(0).html();//获取 状态
                        $(this).html("<button type='button' class='layui-btn btn_color_zise' onclick='showNodePic(\""+flowDepId+"\",\""+taskId+"\")'>节点图</button>");
                    }

                });*/
            },
            page: {layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}, //是否显示分页栏
            limit: 10

        });
        //监听工具条
        table.on('tool(tableFilter)', function (obj) { //注：tool是工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var id = data.id;
            var flowId = data.flowId;
            var flowName = data.flowName;
            var taskId = data.taskId;
            if (layEvent === 'showNodePic') { //取消发起
                showNodePic( flowId,taskId );
            }
        });

    });


    function showNodePic(flowId,taskId) {
        parent.layer.msg("规划中");
    }
</script>

</body>
</html>
